import React,{useRef, useEffect} from 'react'

import {  Modal, Input, Form } from 'antd';

 function TodoListModal({isModalVisible, showModal, getValue, dataItem, updata}, ref) {
    let [form] = Form.useForm()
    function handleOk() {  //  ok 按钮
        // console.log(form.getFieldValue())
        let formObj = form.getFieldValue()
       
        if(updata) {
            showModal()
            getValue({...formObj, key: dataItem.key}, updata)
        } else {
            showModal()
            getValue(formObj, updata)
        }
    }
    function handleCancel() {  // 取消按钮
        console.log("no")
        showModal()
    }

    function onFinish(value) {
        console.log('Success:', value);
        
    }

    function onFinishFailed(errorInfo) {
        console.log('Failed:', errorInfo);
    }

    useEffect(() => {
        if(dataItem && updata) {
            form.setFieldsValue({Name: dataItem.name, Address: dataItem.address, Age: dataItem.age})
        } else {
            form.resetFields()
        }
    })

  return (
    <div>
        <Modal title="添加" 
               visible={isModalVisible} 
               onOk={handleOk} onCancel={handleCancel}>

            <Form
                form={form}
                name="basic"
                labelCol={{span: 8,}}
                wrapperCol={{ span: 16,}}
                initialValues={{}}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item
                    label="Name"
                    name="Name"
                    rules={[
                        {
                            required: true,
                            message: '请输入名字',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="Address"
                    name="Address"
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="Age"
                    name="Age"
                >
                    <Input />
                </Form.Item>

                
            </Form>


        </Modal>
    </div>
  )
}

export default React.forwardRef(TodoListModal)